<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:wc="http://java.sun.com/jsf/composite/header">
<f:view locale="#{mailSystem.currentLocal}">
<h:head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Mail Management</title>
	<link href="./css/styles.css" rel="stylesheet" type="text/css"/>
</h:head>
<body id="mail_mgt">

<h:form>
	<!-- begin wrapper -->
	<div id="wrapper">
	<div style="float: right;">
		<wc:welcome userName="#{mailSystem.loginManageBean.account.emailAddress}" />
	</div><br />
	
	<fieldset>
	  <legend>Mail Management:<h:outputText value="#{mailSystem.workon}" style="color:red;"/></legend>
	  <div style="float: right;">
	  	<h:selectOneMenu value="#{mailSystem.language}" valueChangeListener="#{mailSystem.switchLocale}" immediate="true"
			onchange="submit();">
					<f:selectItem itemValue="English" itemLabel="English" />
					<f:selectItem itemValue="French" itemLabel="French" />										
				</h:selectOneMenu>
	  
	  </div>
		<!-- begin main-->
		<div id="main">
		<!-- begin left nav -->
		<div id="leftcol">
			<h:panelGroup id="mailbox">
				<fieldset>
					<ul>
						<li>
							<h:commandLink action="#{mailSystem.checkInboxMail}" value="#{msgs.inboxlabel}(#{mailSystem.notYetReadMailNumber})" />						
						</li>
						<li>
							<h:commandLink action="#{mailSystem.checkSentMail}" value="#{msgs.sentlabel}(#{mailSystem.sentMailNumber})" />
						</li>
						<li>
							<h:commandLink action="#{mailSystem.checkDeletedMail}" value="#{msgs.trashlabel}(#{mailSystem.deletedMailNumber})" />
						</li>
						<li>
							<a href="#" >Archive(-)</a>
						</li>
					</ul>
					
				</fieldset>
			</h:panelGroup>			
			
			<fieldset>
				<legend style="width: 160px">
					<h:outputText value="#{msgs.profileslabel}" />					  
				</legend>
				#{mailSystem.loginManageBean.account.emailAddress} <br />
				#{mailSystem.loginManageBean.account.city}, #{mailSystem.loginManageBean.account.country} <br />
				<h:outputText value="#{mailSystem.loginManageBean.account.cellPhone}" converter="cellPhoneConvertor" /> <br />
				<div style="float: right;">
					<h:commandLink action="#{mailSystem.editProfile}" value="#{msgs.editlink}" />			
				</div>
				
			</fieldset>
		</div>
		<!-- end left nav -->
		<!-- begin content -->
		<div id="content">	
			<br />
			<div>
				 <h:inputText value="#{mailSystem.contentForSearch}" style="width:550px;"/>&nbsp;
				 <h:commandButton value="&nbsp;#{msgs.searchbutton} &nbsp;&nbsp;" action="#{mailSystem.searchAction}">
				    <f:ajax execute="@form"   
				            render="mailDatatable paging" />
				  </h:commandButton>
  
			</div><br />
			<div style="float: left;">
				 <h:commandButton value="#{msgs.deletebutton}" action="#{mailSystem.deleteEmails}"> 
				 	<f:ajax execute="@form"   
				            render="mailDatatable paging mailbox" />
				 </h:commandButton>
				 <input type="button" value="Archive" />
			</div>
			<div style="float: right;">
				<h:selectOneMenu value = "#{mailSystem.recordsPerPage}" valueChangeListener="#{mailSystem.changeRecordsPerPage}" immediate="true"
			onchange="submit();">
					<f:selectItem itemValue="10" itemLabel="10" />
					<f:selectItem itemValue="20" itemLabel="20" />
					<f:selectItem itemValue="All" itemLabel="All" />										
				</h:selectOneMenu>				
				<h:outputText value="#{msgs.paginglable}" />
			</div>
			<div style="min-height: 500px;clear: both;">
				<h:dataTable var="email" value="#{mailSystem.emails}" style="width:100%;"
				columnClasses="firstColumn,secondColumn,thirdColumn,fourColumn" id="mailDatatable" >
					<h:column>
					    <f:facet name="header">
					    	<h:selectBooleanCheckbox value="#{mailSystem.selectAll}" /> 

					    </f:facet>
					    <div align="center">						 			    	
					    	<h:selectBooleanCheckbox value="#{mailSystem.selectedIds[email.id]}" />					    
					    </div>		    
					 </h:column>
					 <h:column>
					    <f:facet name="header"><h:outputText value="#{msgs.senderheader}" /></f:facet>	
					    <ui:fragment rendered="#{!email.notYetRead}">
							#{email.sender}
						</ui:fragment>					    
					    <h:outputText value="#{email.sender}" rendered="#{email.status == 'Not_Yet_Read'}" style="color:red;"/>	
					 </h:column>
					 <h:column>
					    <f:facet name="header"><h:outputText value="#{msgs.subjectheader}" /></f:facet>					    
					    <h:outputText value="#{email.subject}" rendered="#{email.status != 'Not_Yet_Read'}"/>
					    <h:outputText value="#{email.subject}" rendered="#{email.status == 'Not_Yet_Read'}" style="color:red;"/>
					 </h:column>
					 <h:column>					 				 	
					    <f:facet name="header"><h:outputText value="#{msgs.dateheader}" /></f:facet>					    
					    <h:outputText value="#{email.receiveDate}" rendered="#{email.status != 'Not_Yet_Read'}"/>
					    <h:outputText value="#{email.receiveDate}" rendered="#{email.status == 'Not_Yet_Read'}" style="color:red;"/>
					 </h:column>
				</h:dataTable>
				<br />
			</div>
			<div style="float: right;">
				<i>
					<h:panelGroup id="paging">
						<ui:fragment rendered="#{!mailSystem.firstPage}">
							<h:commandLink action="#{mailSystem.doPreviousPage}" value="#{msgs.previouslink}" />
						</ui:fragment>
						<h:outputText value="#{msgs.previouslink}" rendered="#{mailSystem.firstPage}" />					
						&nbsp;-&nbsp;
						<ui:fragment rendered="#{!mailSystem.lastPage}">
							<h:commandLink action="#{mailSystem.doNextPage}" value="#{msgs.nextlink}" />
						</ui:fragment>
						<h:outputText value="#{msgs.nextlink}" rendered="#{mailSystem.lastPage}" />	
					</h:panelGroup>				
				</i>
			</div>
			
		
		</div>
		<!-- end content -->
		
		</div>
		<!-- end main-->
	  </fieldset>
	</div>
</h:form>
</body>
</f:view>
</html>
